<template>
  <div class="visitor-profile-panel">
    <div class="profile-header">
      <div class="header-icon">
        <svg viewBox="0 0 24 24">
          <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" fill="currentColor"/>
        </svg>
      </div>
      <div class="header-info">
        <h4 class="profile-title">游客行为分析</h4>
        <p class="profile-subtitle">实时游客画像与偏好分析</p>
      </div>
    </div>

    <div class="visitor-stats">
      <div class="stat-row">
        <div class="stat-item active">
          <div class="stat-icon">
            <svg viewBox="0 0 24 24">
              <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" fill="currentColor"/>
            </svg>
          </div>
          <div class="stat-details">
            <div class="stat-value">{{ currentVisitors }}</div>
            <div class="stat-label">实时在园</div>
          </div>
          <div class="stat-trend">
            <div class="trend-indicator up">
              <svg viewBox="0 0 24 24">
                <path d="M7,14L12,9L17,14H7Z" fill="currentColor"/>
              </svg>
              <span>+5.2%</span>
            </div>
          </div>
        </div>

        <div class="stat-item">
          <div class="stat-icon">
            <svg viewBox="0 0 24 24">
              <path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M9.5,10A1.5,1.5 0 0,1 11,11.5A1.5,1.5 0 0,1 9.5,13A1.5,1.5 0 0,1 8,11.5A1.5,1.5 0 0,1 9.5,10M14.5,10A1.5,1.5 0 0,1 16,11.5A1.5,1.5 0 0,1 14.5,13A1.5,1.5 0 0,1 13,11.5A1.5,1.5 0 0,1 14.5,10Z" fill="currentColor"/>
            </svg>
          </div>
          <div class="stat-details">
            <div class="stat-value">{{ avgStayTime }}</div>
            <div class="stat-label">平均停留</div>
          </div>
        </div>
      </div>
    </div>

    <div class="behavior-analysis">
      <h5 class="section-title">
        <svg viewBox="0 0 24 24">
          <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z" fill="currentColor"/>
        </svg>
        热门路径分析
      </h5>
      
      <div class="behavior-items">
        <div 
          v-for="(path, index) in popularPaths" 
          :key="path.id"
          class="behavior-item"
          :style="{ animationDelay: index * 0.1 + 's' }"
        >
          <div class="path-indicator">
            <div class="path-number">{{ index + 1 }}</div>
          </div>
          <div class="path-info">
            <div class="path-route">{{ path.route }}</div>
            <div class="path-stats">
              <span class="path-visitors">{{ path.visitors }}人次</span>
              <span class="path-percentage">{{ path.percentage }}%</span>
            </div>
          </div>
          <div class="path-chart">
            <div 
              class="path-bar" 
              :style="{ 
                width: path.percentage + '%',
                backgroundColor: getPathColor(index)
              }"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <div class="visitor-preferences">
      <h5 class="section-title">
        <svg viewBox="0 0 24 24">
          <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" fill="currentColor"/>
        </svg>
        游客偏好分布
      </h5>
      
      <div class="preference-grid">
        <div 
          v-for="preference in visitorPreferences" 
          :key="preference.type"
          class="preference-item"
        >
          <div class="preference-icon">
            <svg viewBox="0 0 24 24">
              <path :d="preference.icon" fill="currentColor"/>
            </svg>
          </div>
          <div class="preference-info">
            <div class="preference-name">{{ preference.type }}</div>
            <div class="preference-value">{{ preference.value }}%</div>
            <div class="preference-trend" v-if="preference.trend">
              <span :class="getTrendClass(preference.trend)">{{ preference.trend }}</span>
            </div>
          </div>
          <div class="preference-bar">
            <div 
              class="bar-fill" 
              :style="{ 
                width: preference.value + '%',
                backgroundColor: preference.color
              }"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <div class="real-time-activity">
      <h5 class="section-title">
        <svg viewBox="0 0 24 24">
          <path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" fill="currentColor"/>
        </svg>
        实时动态
      </h5>
      
      <div class="activity-feed">
        <div 
          v-for="(activity, index) in recentActivities" 
          :key="activity.id"
          class="activity-item"
          :class="activity.type"
        >
          <div class="activity-time">{{ activity.time }}</div>
          <div class="activity-content">
            <div class="activity-icon">
              <svg viewBox="0 0 24 24">
                <path :d="getActivityIcon(activity.type)" fill="currentColor"/>
              </svg>
            </div>
            <div class="activity-text">{{ activity.description }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

const currentVisitors = ref(2568)
const avgStayTime = ref('3.2h')

const popularPaths = ref([
  {
    id: 1,
    route: '游客中心 → 观音湖 → 梵音寺',
    visitors: 856,
    percentage: 85
  },
  {
    id: 2,
    route: '停车场 → 湖心岛 → 观音湖',
    visitors: 642,
    percentage: 64
  },
  {
    id: 3,
    route: '游客中心 → 湖心岛 → 梵音寺',
    visitors: 423,
    percentage: 42
  },
  {
    id: 4,
    route: '观音湖 → 停车场',
    visitors: 289,
    percentage: 29
  }
])

const visitorPreferences = ref([
  {
    type: '自然风光',
    value: 78,
    color: '#00ff88',
    icon: 'M12,2L13.09,8.26L17,7L14.94,9.06L19,12L14.94,14.94L17,17L13.09,15.74L12,22L10.91,15.74L7,17L9.06,14.94L5,12L9.06,9.06L7,7L10.91,8.26L12,2Z',
    trend: '+5.2%'
  },
  {
    type: '文化体验',
    value: 65,
    color: '#ffab40',
    icon: 'M5,6H23V18H5V6M14,9A3,3 0 0,1 17,12A3,3 0 0,1 14,15A3,3 0 0,1 11,12A3,3 0 0,1 14,9M9,8A2,2 0 0,1 7,10V14A2,2 0 0,1 9,16H19A2,2 0 0,1 21,14V10A2,2 0 0,1 19,8H9Z',
    trend: '+2.8%'
  },
  {
    type: '休闲娱乐',
    value: 52,
    color: '#00bcd4',
    icon: 'M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z',
    trend: '-1.2%'
  },
  {
    type: '美食购物',
    value: 38,
    color: '#66bb6a',
    icon: 'M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.36,10.22L13.16,10C12.38,9.23 12.38,7.97 13.16,7.19L17.5,2.85L18.92,4.27L15.5,7.68L16.91,9.09L20.33,5.68L21.74,7.09L17.4,11.43C16.62,12.21 15.36,12.21 14.58,11.43L14.37,11.22L13.41,13Z',
    trend: '+8.5%'
  },
  {
    type: '摄影打卡',
    value: 45,
    color: '#ff7043',
    icon: 'M9,2V7.38L10.38,9H14L16,11H20A2,2 0 0,1 22,13V19A2,2 0 0,1 20,21H4A2,2 0 0,1 2,19V13A2,2 0 0,1 4,11H7.62L9,9.38V2H9M12,7A4,4 0 0,0 8,11A4,4 0 0,0 12,15A4,4 0 0,0 16,11A4,4 0 0,0 12,7Z',
    trend: '+12.3%'
  }
])

const recentActivities = ref([
  {
    id: 1,
    time: '2分钟前',
    type: 'entry',
    description: '85人从南门进入景区，当前在园游客达到2,650人'
  },
  {
    id: 2,
    time: '5分钟前',
    type: 'photo',
    description: '观音湖拍照点达到高峰，约120人聚集'
  },
  {
    id: 3,
    time: '8分钟前',
    type: 'purchase',
    description: '游客中心商品销售额突破12,500元'
  },
  {
    id: 4,
    time: '12分钟前',
    type: 'exit',
    description: '68人从东门离开景区，停车场车位释放15个'
  },
  {
    id: 5,
    time: '15分钟前',
    type: 'alert',
    description: '梵音寺区域人流量预警已解除，恢复正常状态'
  },
  {
    id: 6,
    time: '18分钟前',
    type: 'purchase', 
    description: '湖心岛餐厅午餐时段销售火爆，营业额达6,800元'
  },
  {
    id: 7,
    time: '22分钟前',
    type: 'entry',
    description: '团体游客120人通过北门入园'
  },
  {
    id: 8,
    time: '25分钟前',
    type: 'photo',
    description: '梵音寺祈福区游客较多，建议分流引导'
  }
])

const getPathColor = (index) => {
  const colors = ['#00ff88', '#00bcd4', '#ffab40', '#66bb6a', '#ff7043']
  return colors[index % colors.length]
}

const getActivityIcon = (type) => {
  const icons = {
    'entry': 'M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V5H19V19M17,17H7V15H17V17M17,13H7V11H17V13M17,9H7V7H17V9Z',
    'photo': 'M9,2V7.38L10.38,9H14L16,11H20A2,2 0 0,1 22,13V19A2,2 0 0,1 20,21H4A2,2 0 0,1 2,19V13A2,2 0 0,1 4,11H7.62L9,9.38V2H9M12,7A4,4 0 0,0 8,11A4,4 0 0,0 12,15A4,4 0 0,0 16,11A4,4 0 0,0 12,7Z',
    'purchase': 'M19,7H18V6A2,2 0 0,0 16,4H8A2,2 0 0,0 6,6V7H5A1,1 0 0,0 4,8V19A3,3 0 0,0 7,22H17A3,3 0 0,0 20,19V8A1,1 0 0,0 19,7M8,6H16V7H8V6M18,19A1,1 0 0,1 17,20H7A1,1 0 0,1 6,19V9H18V19Z',
    'exit': 'M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V5H19V19M17,8.5L15.5,7L12,10.5L8.5,7L7,8.5L10.5,12L7,15.5L8.5,17L12,13.5L15.5,17L17,15.5L13.5,12L17,8.5Z',
    'alert': 'M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z'
  }
  return icons[type] || icons['entry']
}

// 模拟实时数据更新
onMounted(() => {
  // 更新游客数量
  setInterval(() => {
    currentVisitors.value += Math.floor(Math.random() * 10 - 5)
    if (currentVisitors.value < 2400) currentVisitors.value = 2400
    if (currentVisitors.value > 2800) currentVisitors.value = 2800
  }, 5000)
  
  // 动态更新实时活动
  setInterval(() => {
    const newActivity = {
      id: Date.now(),
      time: '刚刚',
      type: getRandomActivityType(),
      description: generateRandomActivity()
    }
    
    // 更新时间
    recentActivities.value.forEach(activity => {
      const timeMatch = activity.time.match(/(\d+)分钟前/)
      if (timeMatch) {
        const minutes = parseInt(timeMatch[1]) + 1
        activity.time = `${minutes}分钟前`
      } else if (activity.time === '刚刚') {
        activity.time = '1分钟前'
      }
    })
    
    // 添加新活动，保持最多8条
    recentActivities.value.unshift(newActivity)
    if (recentActivities.value.length > 8) {
      recentActivities.value.pop()
    }
  }, 30000) // 每30秒更新一次
})

const getRandomActivityType = () => {
  const types = ['entry', 'exit', 'photo', 'purchase', 'alert']
  return types[Math.floor(Math.random() * types.length)]
}

const generateRandomActivity = () => {
  const activities = [
    '新游客团队从西门入园，约45人',
    '观音湖区域游客拍照热点形成',
    '餐饮区消费活跃，营业额持续增长',
    '部分游客从主要出口离园',
    '停车场使用率达到85%，提醒引导',
    '梵音寺祈福活动开始，吸引众多游客',
    '湖心岛观景台人流量适中',
    '游客中心咨询服务繁忙'
  ]
  return activities[Math.floor(Math.random() * activities.length)]
}

const getTrendClass = (trend) => {
  if (trend.startsWith('+')) {
    return 'trend-indicator up'
  } else if (trend.startsWith('-')) {
    return 'trend-indicator down'
  }
  return ''
}
</script>

<style scoped>
.visitor-profile-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 255, 136, 0.3) transparent;
  padding: 0.2rem;
}

.visitor-profile-panel::-webkit-scrollbar {
  width: 4px;
}

.visitor-profile-panel::-webkit-scrollbar-track {
  background: transparent;
}

.visitor-profile-panel::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 136, 0.3);
  border-radius: 2px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.profile-header:hover {
  background: rgba(0, 255, 136, 0.15);
  border-color: rgba(0, 255, 136, 0.4);
}

.header-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 136, 0.15);
  border-radius: 6px;
  color: #00ff88;
  flex-shrink: 0;
}

.header-icon svg {
  width: 16px;
  height: 16px;
}

.header-info {
  flex: 1;
  min-width: 0;
}

.profile-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.1rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-subtitle {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visitor-stats {
  background: rgba(0, 255, 136, 0.06);
  border: 1px solid rgba(0, 255, 136, 0.15);
  border-radius: 10px;
  padding: 0.8rem;
}

.stat-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease;
  min-height: auto;
}

.stat-item.active {
  background: rgba(0, 255, 136, 0.15);
  border-color: rgba(0, 255, 136, 0.3);
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}

.stat-item:hover {
  background: rgba(0, 255, 136, 0.12);
  transform: translateY(-1px);
}

.stat-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 136, 0.15);
  border-radius: 6px;
  color: #00ff88;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 14px;
  height: 14px;
}

.stat-details {
  flex: 1;
  min-width: 0;
}

.stat-value {
  font-size: 1rem;
  font-weight: bold;
  color: #00ff88;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
  margin-bottom: 0.1rem;
  white-space: nowrap;
}

.stat-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.stat-trend {
  flex-shrink: 0;
}

.trend-indicator {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
}

.trend-indicator.up {
  color: #66bb6a;
}

.trend-indicator svg {
  width: 10px;
  height: 10px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #00ff88;
  margin: 0 0 0.6rem 0;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(0, 255, 136, 0.2);
}

.section-title svg {
  width: 14px;
  height: 14px;
}

.behavior-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.behavior-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  background: rgba(0, 255, 136, 0.04);
  border: 1px solid rgba(0, 255, 136, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
  animation: slideInLeft 0.5s ease-out;
}

.behavior-item:hover {
  background: rgba(0, 255, 136, 0.1);
  border-color: rgba(0, 255, 136, 0.2);
}

.path-indicator {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.path-number {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 136, 0.15);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: bold;
  color: #00ff88;
}

.path-info {
  flex: 1;
  min-width: 0;
}

.path-route {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.path-stats {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
}

.path-visitors {
  color: #00ff88;
  font-weight: 600;
  white-space: nowrap;
}

.path-percentage {
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.path-chart {
  width: 40px;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.path-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.8s ease;
}

.preference-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.preference-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem;
  background: rgba(0, 255, 136, 0.04);
  border: 1px solid rgba(0, 255, 136, 0.1);
  border-radius: 6px;
  transition: all 0.3s ease;
}

.preference-item:hover {
  background: rgba(0, 255, 136, 0.1);
  border-color: rgba(0, 255, 136, 0.2);
}

.preference-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00ff88;
  flex-shrink: 0;
}

.preference-icon svg {
  width: 12px;
  height: 12px;
}

.preference-info {
  flex: 1;
  min-width: 0;
}

.preference-name {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preference-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: #00ff88;
}

.preference-trend {
  flex-shrink: 0;
}

.preference-trend .trend-indicator {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.1rem 0.2rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
}

.preference-trend .trend-indicator.up {
  color: #66bb6a;
  background: rgba(102, 187, 106, 0.15);
}

.preference-trend .trend-indicator.down {
  color: #ff7043;
  background: rgba(255, 112, 67, 0.15);
}

.preference-bar {
  width: 35px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 180px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 255, 136, 0.3) transparent;
}

.activity-feed::-webkit-scrollbar {
  width: 3px;
}

.activity-feed::-webkit-scrollbar-track {
  background: transparent;
}

.activity-feed::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 136, 0.3);
  border-radius: 2px;
}

.activity-item {
  padding: 0.5rem;
  background: rgba(0, 255, 136, 0.04);
  border: 1px solid rgba(0, 255, 136, 0.1);
  border-radius: 6px;
  transition: all 0.3s ease;
  animation: fadeInUp 0.4s ease-out;
  position: relative;
}

.activity-item.new {
  animation: newActivity 1s ease-out;
  border-color: rgba(0, 255, 136, 0.4);
  background: rgba(0, 255, 136, 0.1);
}

.activity-item:hover {
  background: rgba(0, 255, 136, 0.1);
  border-color: rgba(0, 255, 136, 0.2);
}

.activity-item.alert {
  background: rgba(255, 171, 64, 0.06);
  border-color: rgba(255, 171, 64, 0.15);
}

.activity-item.purchase {
  background: rgba(102, 187, 106, 0.06);
  border-color: rgba(102, 187, 106, 0.15);
}

.activity-item.entry {
  background: rgba(0, 188, 212, 0.06);
  border-color: rgba(0, 188, 212, 0.15);
}

.activity-item.exit {
  background: rgba(255, 112, 67, 0.06);
  border-color: rgba(255, 112, 67, 0.15);
}

.activity-item.photo {
  background: rgba(255, 171, 64, 0.06);
  border-color: rgba(255, 171, 64, 0.15);
}

.activity-time {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.2rem;
}

.activity-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.activity-icon {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00ff88;
  flex-shrink: 0;
}

.activity-item.alert .activity-icon {
  color: #ffab40;
}

.activity-item.purchase .activity-icon {
  color: #66bb6a;
}

.activity-item.entry .activity-icon {
  color: #00bcd4;
}

.activity-item.exit .activity-icon {
  color: #ff7043;
}

.activity-item.photo .activity-icon {
  color: #ffab40;
}

.activity-icon svg {
  width: 10px;
  height: 10px;
}

.activity-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes newActivity {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 1800px) {
  .path-route {
    font-size: 0.7rem;
  }
  
  .activity-text {
    font-size: 0.7rem;
  }
  
  .preference-name {
    font-size: 0.7rem;
  }
}

@media screen and (max-width: 1680px) {
  .stat-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .stat-item {
    padding: 0.5rem;
    gap: 0.5rem;
  }
  
  .stat-icon {
    width: 24px;
    height: 24px;
  }
  
  .stat-icon svg {
    width: 12px;
    height: 12px;
  }
  
  .path-chart {
    width: 30px;
  }
  
  .preference-bar {
    width: 25px;
  }
}

@media screen and (max-width: 1400px) {
  .visitor-profile-panel {
    gap: 0.6rem;
  }
  
  .path-chart {
    width: 25px;
  }
  
  .preference-bar {
    width: 20px;
  }
  
  .stat-item {
    min-height: auto;
    padding: 0.4rem;
  }
  
  .stat-value {
    font-size: 0.9rem;
  }
  
  .stat-label {
    font-size: 0.65rem;
  }
  
  .section-title {
    font-size: 0.75rem;
  }
}
</style> 